<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            margin: 100px auto;
            border: 2px solid #333;
        }

        .box .dt {
            display: flex;
            height: 50px;
            align-items: center;
            border-bottom: 1px solid #333;
        }
        .box .dt span {
            line-height: 50px;
            padding: 0 20px;
            cursor: pointer;
        }
        /*.box .dt span:first-child {*/
        .box .dt span.active {
            background-color: #ff6700;
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            transform: rotate(360deg);
            transition: .5s;
        }

        .card {
            /*height: 200px;*/
            display: none;
        }
        .card.show {
            display: block;
        }
    </style>
</head>
<body>

<!--<h1 class="card"></h1>-->

<div class="box" id="box">
    <div class="dt" id="dt">
        <span style="color: red">百度</span>
        <span>京东</span>
        <span>淘宝</span>
        <span>拼多多</span>
        <span>小米</span>
    </div>
    <div class="card" style="display: block;">
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
    </div>
    <div class="card">
        <h2>京东</h2>
        <h2>京东</h2>
        <span>京东</span>
        <h2>京东</h2>
    </div>
    <div class="card">
        <h3>淘宝</h3>
        <h3>淘宝</h3>
        <h3>淘宝</h3>
        <span>淘宝</span>
    </div>
    <div class="card">
        <h2>拼多多</h2>
        <h2>拼多多</h2>
    </div>
    <div class="card">
        <h3>小米</h3>
        <h3>小米</h3>
        <h3>小米</h3>
    </div>
</div>




<script src="jquery-3.5.1.js"></script>
<script src="index.js"></script>
</body>
</html>